<template>
  <div id="buy_view">
    <div class="buy_header">
      <module-header :head_index="nav_cart_index"/>
    </div>
    <div class="buy_main">
      <h2 class="bg-cyan" style="border-right: 1px solid black">
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple color-white">订单确认</div></el-col>
          <el-col :span="20"><div class="grid-content bg-white" style="font-size: 15px;text-align: left;padding-top: 5px">请核对您的信息，确认无误之后，再点击添加商品。</div></el-col>
        </el-row>
      </h2>
      <el-table
        :data="buy_project"
        style="width: 100%">
        <el-table-column
          prop="cname"
          label="商品名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="csort"
          label="类别"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="cimg"
          label="图片"
          show-overflow-tooltip>
          <template  slot-scope="scope">
            <img style="width: 100px;height: 100px" :src="require('@/assets/img/basketball/' + scope.row.cimg)" alt="这是图片">
          </template>
        </el-table-column>
        <el-table-column
          prop="ccount"
          label="数量/个"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="ctotalPrice"
          label="总价(元)"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
<!--      <el-table-->
<!--        :data="buy_project[0]"-->
<!--        style="width: 100%">-->
<!--        <el-table-column-->
<!--          prop="cname"-->
<!--          label="商品名">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="csort"-->
<!--          label="类别">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="cimg"-->
<!--          label="图片">-->
<!--          <template  slot-scope="scope">-->
<!--            <img style="width: 100px;height: 100px" :src="require('@/assets/img/basketball/'+ scope.cimg)" alt="这是图片">-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="ccount"-->
<!--          label="数量">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="ctotalPrice"-->
<!--          label="总价">-->
<!--        </el-table-column>-->
<!--      </el-table>-->
    </div>
    <div class="buy_footer">
      <div class="buy_footer_left">
        <el-button>编辑</el-button>
        <i class="color-cyan">收件人:[{{user.a_user}}]</i>
        <i class="color-cyan">手机号:[{{user.a_phone}}]</i>
        <i class="color-cyan">备注:[{{user.a_tag}}]</i>
        <i class="color-cyan">收货地址:[{{user.a_address}}]</i>
      </div>
      <div class="buy_footer_right">
        <div class="height-per-100 color-white" style="line-height: 50px;font-size: 20px;padding-left: 20px">合计:￥{{sum}}元</div>
        <el-link type="primary" @click="onSubmit()" style="height:50px;background: blueviolet;padding: 0 30px;font-size: 15px">支付</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import moduleHeader from '../components/Common/Header'
export default {
  name: 'Buy',
  components: {
    moduleHeader // 导入头部组件
  },
  data () {
    return {
      nav_cart_index: 1,
      user: [],
      order: [],
      sum: 0,
      buy_project: []// 将要购买的商品
    }
  },
  methods: {
    // 支付
    onSubmit () {
      this.$message({
        message: '支付成功',
        type: 'success'
      })
      console.log('支付成功')
      setTimeout(() => {
        this.$router.push('/user')
      }, 1000)
    },
    // 地址修改
    address () {},
    // 计算合计方法
    total () {
      // initTable(this)
      console.log('dwadwdwd' + this.buy_project.length)
      for (let i = 0; i < this.buy_project.length; i++) {
        this.sum = this.buy_project[i].ccount*this.buy_project[i].cprice
      }
    }
  },
  mounted () {
    initTable(this)
    this.buy_project = this.$store.state.vuex_order_Info
    // console.log('测试', this.buy_project)
    // console.log(this.order)
    // this.total()
  },
  // 计算合计
  beforeUpdate () {
    console.log(this.order)
    this.total()
  },
  computed: {
  }
}
function initTable ($this) {
  $this.$axios.get('/orders/selectByUid',
    {
      params: {
        u_id: 1
      }
    }).then(resp => {
    // console.log(resp.data.user)
    // console.log(resp.data.order)
    $this.user = resp.data.user
    $this.order = resp.data.order
  })
}
</script>

<style lang="less" scoped>
#buy_view{
  width: 100%;
  height: 100%;
  .buy_header {
    width: 100%;
    height: 95px;
    /*background: red;*/
    margin: 0 auto;

    top: 0;
    left: 0;
    z-index: 2501;
    background: white;
    border-bottom: 1px solid gainsboro;
  }
  .buy_main{
    width: 70%;
    height: 550px;
    margin: 0 auto;
    /*background: red;*/

    border: 1px solid black;
  }
  .buy_footer{
    width: 70%;
    height: 50px;
    margin: 0 auto;
    /*background: red;*/
    border: 1px solid black;
    display: flex;
    .buy_footer_left {
      width: 75%;
      height: 100%;
      /*background: #9c26b0;*/
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .buy_footer_right {
      width: 25%;
      height: 100%;
      background: royalblue;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
